<template>
	<view style="padding: 20px;" @touchmove="handleTouchMove">
		<view style="margin: 0rpx 0rpx 20rpx 0rpx;">
			<uni-datetime-picker :clearIcon="false" v-model="range" type="daterange" @change="change"
				@maskClick="maskClick" />
		</view>
		<!-- <view style="width: 100%;background-color: #fff;border-radius: 10rpx;height: 200rpx;">
			<view style="padding: 20rpx;font-weight: 700;">
				今日巡检任务
			</view>
			<view style="padding: 10rpx 40rpx 0rpx 40rpx;display: flex;">
				<view style="flex:  1 1 33.33%;text-align: center;font-weight: 700;font-size: 24px;color: #999;">
					{{inspectionData.totalCount}}
				</view>
				<view style="flex:  1 1 33.33%;text-align: center;font-weight: 700;font-size: 24px;color: #66AA77;">
					{{inspectionData.processedCount}}
				</view>
				<view style="flex:  1 1 33.33%;text-align: center;font-weight: 700;font-size: 24px;color: #5B9EFF;">
					{{inspectionData.unprocessedCount}}
				</view>
			</view>
			<view style="padding: 0rpx 40rpx;display: flex;">
				<view style="flex: 1 1 33.33%;text-align: center;color: #9f9f9f;">全部</view>
				<view style="flex:  1 1 33.33%;text-align: center;color: #9f9f9f;">进行中</view>
				<view style="flex:  1 1 33.33%;text-align: center;color: #9f9f9f;">已完成</view>
			</view>

		</view> -->
		<view style="width: 100%;background-color: #fff;border-radius: 10rpx;height: 200rpx;margin-top: 40rpx;"
			v-for="(item,index) in dataRow" :key="index">
			<view @click="gotoPage('/pages/index/addInspection', item)">
				<view
					style="height: 70rpx;width: 100%;background-color: #E3F0FF;display: flex; justify-content: space-between;border-radius: 10rpx 10rpx 0rpx 0rpx;">
					<view style="margin-left: 20rpx;height: 70rpx;
					line-height: 70rpx;width: 250rpx;">
						巡检任务
						<a style="font-size: 24rpx;color: #A8A8A8;margin-left: 5rpx;">({{item.id}})</a>
					</view>
					<view v-if="item.status =='未开始'" style="height: 40rpx;line-height: 40rpx;
					background-color: #5B9EFF;border-radius: 5rpx;margin-top: 15rpx;color: #fff;
					font-size: 20rpx;padding: 0rpx 10rpx;margin-right: 20rpx;">
						尚未开始</view>
					<view v-else-if="item.status =='巡检中'" style="height: 40rpx;line-height: 40rpx;
					background-color: #66AA77;border-radius: 5rpx;margin-top: 15rpx;color: #fff;
					font-size: 20rpx;padding: 0rpx 10rpx;margin-right: 20rpx;">
						正在巡检</view>
					<view v-else style="height: 40rpx;line-height: 40rpx;
						background-color: #E59999;border-radius: 5rpx;margin-top: 15rpx;color: #fff;
						font-size: 20rpx;padding: 0rpx 10rpx;margin-right: 20rpx;">
						巡检完成</view>
				</view>
				<view style="padding: 20rpx;">
					<view>时间：{{changeTime(item.handleTime)}}</view>
					<view>点位：{{item.inspectionSchedule}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		queryWSInspection
	} from "@/api/index"
	export default {
		data() {
			return {
				range: ['2021-02-1', '2021-3-28'],
				start: Date.now() - 1000000000,
				end: Date.now() + 1000000000,
				form: {},
				inspectionData: {},
				dataRow: [],
				startX: 0, // 触摸开始的X坐标
				endX: 0, // 触摸结束的X坐标
				threshold: 50, // 滑动判定的距离阈值
			}
		},
		onReady() {
			this.getTime();
			this.getServerData1();
		},
		
		methods: {
			getServerData1() {
				this.form.beginTime = this.range[0]
				this.form.endTime = this.range[1]
				queryWSInspection(this.form).then(response => {
					// 使用示例
					console.info('aaaaa', response)
					this.inspectionData = response;
					this.dataRow = response
				})

			},
			gotoPage(url, item) {
				console.log("--------", JSON.stringify(item))
				uni.navigateTo({
					url: url + '?item=' + JSON.stringify(item)
				})
			},
			changeTime(e) {
				let date = new Date(e);
				let year = date.getFullYear();
				let month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，需要加1，然后使用padStart方法补齐两位
				let day = date.getDate().toString().padStart(2, '0'); // 使用padStart方法补齐两位


				let hours = date.getHours().toString().padStart(2, '0');
				let minutes = date.getMinutes().toString().padStart(2, '0');
				let seconds = date.getSeconds().toString().padStart(2, '0');

				let formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
				return formattedDate;
			},
			handleTouchMove(event) {
				if (event.touches.length === 1) {
					// 单点触摸移动
					event.preventDefault(); // 防止页面滚动
					const touch = event.touches[0];
					if (touch.screenX > this.startX) {
						// 向右滑动
						this.startX = touch.screenX;
					}
				}
			},
			handleTouchEnd(event) {
				if (this.endX - this.startX > this.threshold) {
					// 满足滑动条件则返回上一页
					uni.navigateBack({
						delta: 1,
					});
				}
				// 重置触摸坐标
				this.startX = 0;
				this.endX = 0;
			},

			maskClick(e) {
				this.range = e
				console.log('maskClick事件:', e);
				this.getServerData1();
			},
			change(e) {
				this.range = e
				this.getServerData1();
				console.log('change事件:', e);
			},

			getTime() {
				const today = new Date();
				const year = today.getFullYear();
				const month = today.getMonth(); // 月份从 0 开始，所以需要加 1
				const day = today.getDate();

				// 获取当前月份的第一天
				const firstDayOfMonth = new Date(year, month, 1);

				// 格式化日期
				const format = (date) => {
					const year = date.getFullYear();
					const month = String(date.getMonth() + 1).padStart(2, '0');
					const day = String(date.getDate()).padStart(2, '0');
					return `${year}-${month}-${day}`;
				};

				const startDate = format(firstDayOfMonth);
				const endDate = format(today);

				this.range = [startDate, endDate];
			},onPullDownRefresh() {
				console.log('下拉刷新')
				this.getServerData1();
				setTimeout(() => {
					console.log('下拉刷新停止')
					uni.stopPullDownRefresh()
				}, 2000)
			},
		},
		onShow() {
			this.getServerData1()
		}
	}
</script>

<style>

</style>